<template>
  <view class="page">
    <!-- topbar start -->
    <view class="cu-custom bg-white solid-bottom" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
      <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="action" @click="back"><text class="cuIcon-back fu-fs36"></text></view>
        <!-- #ifdef H5 -->
        <view class="fu-fs32 text-333">{{i18n['我的足迹']}}</view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="fu-fs32">{{i18n['我的足迹']}}</view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view v-if="len > 0" class="action" @click="showSelect">{{ edit }}</view>
        <view v-else class="action"></view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view></view>
        <!-- #endif -->
      </view>
    </view>
    <!-- topbar end -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="sticky-bar" :style="{top: CustomBar+'px'}">
      <view v-if="len > 0" class="action" @click="showSelect">{{ edit }}</view>
      <view v-else class="action"></view>
    </view>
    <!-- #endif -->
    <!-- 数据加载状态 start -->
    <fu-loading v-if="isInit"></fu-loading>
    <!-- 数据加载状态 end -->
    <!-- 收藏数据 start-->
    <view class="content" v-if="!isInit">
      <!-- 日历 start -->
     <view class="data-wrap flex justify-start align-center" @click="isShow = true">
        <view class="data-start data-box flex justify-between align-center">
          <view class="data-time text-333 text-sm">
            {{start_time}}
          </view>
          <view class="data-img">
            <image :src="require('../../static/calendar-one.png')" mode="widthFix"></image>
          </view>
        </view>
        <view class="data-to">
          {{i18n['至']}}
        </view>
        <view class="data-end data-box flex justify-between align-center">
          <view class="data-time text-333 text-sm">
            {{end_time}}
          </view>
          <view class="data-img">
            <image src="@/static/calendar-one.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 日历弹框 start -->
      <fu-popup v-model="isShow" mode="center" border-radius="16" :mask-close-able="true" @close="closePopup">
        <view class="calendar-box">
          <view class="calendar-wrap">
            <view class="calendar-title height-100 flex justify-center align-center">
              <view class="calendar-title-prev text-333" @click="prevMonth"><text class="cuIcon-playfill"></text></view>
              <view class="calendar-title-data text-333">
                {{ currentDate[0] }}{{i18n['年']}}{{ currentDate[1] }}{{i18n['月']}} </view>
              <view class="calendar-title-next text-333" @click="nextMonth"><text class="cuIcon-playfill"></text></view>
            </view>
            <view class="flex justify-between align-center text-center text-333 text-df height-76">
              <view class="calendar-item">{{i18n['日']}}</view>
              <view class="calendar-item">{{i18n['一']}}</view>
              <view class="calendar-item">{{i18n['二']}}</view>
              <view class="calendar-item">{{i18n['三']}}</view>
              <view class="calendar-item">{{i18n['四']}}</view>
              <view class="calendar-item">{{i18n['五']}}</view>
              <view class="calendar-item">{{i18n['六']}}</view>
            </view>
            <view class="flex justify-between align-center flex-wrap text-center text-333 text-df calendar-content">
              <block>
                <view class="height-76 calendar-item flex justify-center align-center" v-for="(item,index) in calendar"
                  :key="index" @click="chooseTime(item)">
                  <view class="calendar-item-bg"
                    :class="{'isBg':item.isBg,'not':item.isNot,'active':item.active,'start':item.start,'end':item.end}">
                    <view class="calendar-item-num round" :class="{'future':item.future}">
                      {{item.day}}
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>
      </fu-popup>
      <!-- 日历弹框 end -->
      <!-- 日历 end -->


      <!-- 列表 start -->
      <block v-if="!isInit">
        <block v-for="(item, index) in listData" :key="index">
          <view class="footprint-data text-666 flex justify-start align-center" @click.stop="dataChange(index)">
            <block v-if="showDel == 1">
              <text v-if="selectId[index].length != listData[index].length"
                class="fu-iconfont select-dot margin-right-xs text-999">&#xe867;</text>
              <text v-if="selectId[index].length == listData[index].length"
                class="fu-iconfont act select-dot  margin-right-xs">&#xe65b;</text>
            </block>
            <text>{{ index }}</text>
          </view>
          <view class="footprint-wrap grid col-3 ">
            <view class="footprint-item-wrap" v-for="(oItem, oIndex) in item" :key="oIndex" @click="navToDetail(oItem)">
              <view class="footprint-item">
                <view class="mask" v-if="showDel == 1"></view>
                <view v-if="showDel == 1" class="footprint-item-select"
                  @click.stop="checkChange(oItem.isSelect, oItem.aid, index, oIndex)">
                  <text v-if="!oItem.isSelect" class="fu-iconfont select-dot text-999">&#xe867;</text>
                  <text v-if="oItem.isSelect" class="fu-iconfont act select-dot">&#xe65b;</text>
                </view>
                <view class="footprint-item-image">
                  <view class="image">
                    <fu-image :src="oItem.collect_img" mode="aspectFill"></fu-image>
                  </view>
                </view>
                <view class="text-cut text-sm text-title">{{ oItem.collect_title }}</view>
                <view class="text-lg footprint-item-color">
					<text style="font-size: 24rpx;">会员价</text>
                  <text class="text-xs">￥</text>
                  <text class="text-bold">{{ oItem.shop_price }}</text>
                </view>
              </view>
            </view>

            <view class="">
              <!--当个伪元素吧 -->
            </view>

          </view>
        </block>
      </block>
      <!-- 列表 end -->

      <!-- 编辑 start -->
      <view class="footer-wrap " v-if="len > 0" v-show="showDel == 1">
        <view class="footer flex justify-between align-center">
          <view @click="selectAll" class="flex justify-start align-center">
            <text v-if="len != num" class="fu-iconfont select-dot text-999">&#xe867;</text>
            <text v-if="len == num" class="fu-iconfont act select-dot">&#xe65b;</text>
            <text class="margin-left-xs">{{ selectAllFont }}</text>
          </view>
          <view>
            <button type="mini-btn" class="btn-bg" plain="true" @click="del()">{{i18n['删除']}}</button>
          </view>
        </view>
      </view>
      <!-- 编辑 end -->
    </view>
    <!-- 收藏数据 end -->
    <!-- 空数据 start -->
    <fu-empty-ui emptyImage="collection" v-if="len == 0 && !isInit"></fu-empty-ui>
    <!-- 空数据 end -->
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
  // 引入日历混入
  import calendar from '@/common/mixin/calendar.js';
  export default {
    mixins: [calendar],
    data() {
      return {
        StatusBar: this.StatusBar, // 标题栏高度
        CustomBar: this.CustomBar, // 状态栏高度
        listData: [], //我的收藏列表
        showDel: 0, //编辑状态显示 0不显示 1 显示
        selectId: [], // 当前选中的商品
        edit: global.i18n['编辑'], //编辑状态显示时编辑值
        isInit: false, //初始化
        selectAllFont: global.i18n['全选'], // 全选按钮显示文字
        isSelectAll: false, // 是否全选
        isShow: false, //日历弹框
        startTime: '', //记录用户点击日历时的开始时间
        endTime: '', //记录用户点击日历时的结束时间
      };
    },
    computed: {
      len() {
        let num = 0;
        for (let attr in this.listData) {
          this.listData[attr].forEach(val => {
            num++;
          });
        }
        return num;
      },
      num() {
        let number = 0;
        for (let attr in this.selectId) {
          this.selectId[attr].forEach(val => {
            number++;
          });
        }
        return number;
      }
    },
    methods: {
      /**
       * @description 返回上一页
       */
      back() {
        uni.navigateBack();
      },

      /**
       * @description 编辑事件
       */
      showSelect() {
        this.showDel = this.showDel == 1 ? 0 : 1;
        this.edit = this.showDel == 1 ? this.i18n['完成'] : this.i18n['编辑'];
      },
      /**
       * @description 选中事件
       * @param {Object} isSelect 事件源选中与否
       * @param {Object} id 事件源id
       * @param {Object} index 事件源下标
       */
      checkChange(isSelect, id, index, oIndex) {
        // 判断是否被选中  未选中id加入选中数组  已选中id从数组中删除选中
        if (!isSelect) {
          this.selectId[index].push(id);
        } else {
          let i = this.selectId[index].findIndex(item => item == id);
          this.selectId[index].splice(i, 1);
        }
        // 判断数据是否已经全部选中  数据已经全部选中 全部选中按钮变色 同时改为取消全选
        if (this.len == this.num) {
          this.selectAllFont = this.i18n['取消全选'];
          this.isSelectAll = true;
        } else {
          this.selectAllFont = this.i18n['全选'];
          this.isSelectAll = false;
        }
        // 改变数据选中状态
        this.listData[index][oIndex].isSelect = !isSelect;
      },
      /**
       * @description 点击去详情事件
       * @param {Object} item 入参 事件源的信息
       */
      navToDetail(item) {
        // 在编辑装填不能跳转
        if (this.showDel == 1) return;
        // 跳转商品详情
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail/index',
          params: {
            goods_id: item.collect_id, //商品id
            sku_id: item.sku_id //商品规格sku_id
          }
        });
      },
      /**
       * @description 取消编辑事件
       */
      cancle() {
        this.showDel = 0;
      },
      /**
       * @description 获取足迹数据
       * @param {Boolen} isPull 是否刷新
       * @param {Number} type 1不带搜索  2带时间搜索 3 带时间段搜索 type == 2 time type ==3 start_time  end_time
       */
      getData(isInit, isPull) {
        if (isInit) {
          this.isInit = true;
        }
        this.$api.post(global.apiUrls.postFootprint, {
          type: 3,
          start_time: this.start_time,
          end_time: this.end_time
        }).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            let list = res.data.data;
            let obj = {};
            for (let attr in list) {
              obj[attr] = [];
              list[attr].forEach(val => {
                val.isSelect = false;
              });
            }
            this.selectId = obj;
            this.listData = list;
          } else {
            this.$message.info(res.data.msg);
          }
          if (isInit) {
            this.isInit = false;
          }
          if (isPull) {
            uni.stopPullDownRefresh();
          }
        }).catch(err => {
          console.log(err);
          if (isInit) {
            this.isInit = false;
          }
          if (isPull) {
            uni.stopPullDownRefresh();
          }
        })
      },
      /**
       * @description 删除事件
       */
      del() {
        var that = this;
        // 无选中时不能删除
        console.log(this.num)
        if (this.num == 0) {
          this.$message.info(this.i18n['请选择要删除的商品']);
          return;
        }
        let arr = [];
        for (let attr in this.selectId) {
          this.selectId[attr].forEach(val => {
            arr.push(val);
          })
        }
        console.log(arr);
        // 根据选中id调用接口删除收藏
        // 提交请求
        this.$util.debounce(() => {
          this.$api
            .post(global.apiUrls.PostUserAddonsCancelCollection, {
              aid: arr.join(','),
              type: 3
            })
            .then(res => {
              var res = res.data;
              if (res.code == 1) {
                // 删除成功提示
                this.$message.info(this.i18n['删除成功']);
                // this.num = 0
                this.getData();
                // 删除后状态回归
                this.isSelectAll = false;
                this.selectId = {};
                this.showDel = 0; //编辑状态显示 0不显示 1 显示
                this.edit = this.i18n['编辑']; //编辑状态显示时编辑值
                this.selectAllFont = this.i18n['全选']; // 全选按钮显示文
                // 删除成功刷新数据

              } else {
                // 删除失败提示
                this.$message.info(res.msg);
              }
            });
        }, 1000, true);
      },
      /**
       * @description 同意日期下全选  全不选
       */
      dataChange(index) {
        let len = this.listData[index].length;
        let num = this.selectId[index].length;
        let select = this.selectId[index];
        let list = this.listData[index];
        // 已全部选中
        if (len == num) {
          select = [];
          list.forEach(val => {
            val.isSelect = false;
          });
        } else {
          select = [];
          this.listData[index].forEach(val => {
            val.isSelect = true;
            select.push(val.aid);
          });
        }
        this.$set(this.selectId, index, select);
        this.$set(this.listData, index, list);
        if (this.len == this.num) {
          this.selectAllFont = this.i18n['取消全选'];
          this.isSelectAll = true;
        } else {
          this.selectAllFont = this.i18n['全选'];
          this.isSelectAll = false;
        }
      },
      /**
       * @description 全选 全不选事件
       */
      selectAll() {
        // 判断是否全选  若已全选则清空已选中id  反正全部选中
        if (!this.isSelectAll) {
          // this.selectId = {};
          this.selectAllFont = this.i18n['取消全选'];
          for (let attr in this.listData) {
            this.selectId[attr] = [];
            this.listData[attr].forEach(val => {
              val.isSelect = true;
              this.selectId[attr].push(val.aid);
            });
          }
          this.isSelectAll = true;
        } else {
          // this.selectId = {};
          this.selectAllFont = this.i18n['全选'];
          for (let attr in this.listData) {
            this.selectId[attr] = [];
            this.listData[attr].forEach(val => {
              val.isSelect = false;
            });
          }
          this.isSelectAll = false;
        }
      },
      /**
       * @description 处理日历的钩子
       * @param {Object} arr 入参  日历数组
       */
      handleCalendarFn(arr) {
        // 日历暂开时，显示全部日历 日历收起时 显示已经选择的日期  默认当前日期
        arr.forEach(val => {
          if (val.formData == this.start_time) {
            val.active = true;
            val.start = true;
          }
          if (val.formData == this.end_time) {
            val.active = true;
            val.end = true;
          }
          if (new Date(val.formData).getTime() >= new Date(this.start_time).getTime() && new Date(val.formData)
            .getTime() <= new Date(this.end_time).getTime()) {
            val.isBg = true;
          }
          if (new Date(val.formData).getTime() > new Date().getTime() && !val.isNot) {
            val.future = true;
          }
        })
        return arr;
      },
      /**
       * @description 选中日期
       * @param {Object} item 入参  日历单个对象
       */
      chooseTime(item) {
        // 大于当前时间不能点击
        if (new Date(item.formData).getTime() > new Date().getTime()) {
          // this.$message.info('不能选择大于现在的时间');
          return;
        }
        if (item.isNot) {
          return;
        }
        // 先记录本地上次筛选
        uni.setStorageSync('start', this.start_time);
        uni.setStorageSync('end', this.end_time);
        //  this.start_time = '';
        //  this.end_time = '';
        if (!this.startTime && !this.endTime) {
          console.log(1)
          this.startTime = item.formData;
        } else if (this.startTime && !this.endTime) {
          console.log(2)
          this.endTime = item.formData;
        }
        this.calendar.forEach(val => {
          val.active = false;
          val.start = false;
          val.end = false;
          val.isBg = false;
          if ((val.formData == this.startTime && !val.isNot) || val.formData == this.endTime && !val.isNot) {
            val.active = true;
          }
        })
        if (this.startTime && this.endTime) {
          console.log(3)
          this.isShow = false;
        }
      },
      /**
       * @description 关闭日期弹窗 处理日期获取数据
       */
      closePopup() {
        console.log(this.start_time, this.end_time, this.endTime, this.startTime)
        if (!this.endTime || !this.startTime) {
          this.endTime = ''
          this.startTime = ''
          // 如果没有同时选中两个，则取消被选中的项
          this.calendar.forEach(val => {
            val.active = false;
            val.start = false;
            val.end = false;
            val.isBg = false;
            if ((val.formData == this.startTime && !val.isNot) || val.formData == this.endTime && !val.isNot) {
              val.active = true;
            }
          })
        }
        console.log(this.start_time, this.end_time, this.endTime, this.startTime)
        if (this.startTime && this.endTime) {
          if (new Date(this.startTime).getTime() < new Date(this.endTime).getTime()) {
            this.start_time = this.startTime;
            this.end_time = this.endTime;
          } else {
            this.start_time = this.endTime;
            this.end_time = this.startTime;
          }
          this.getData(false, false);
        } else {
          if (uni.getStorageSync('start') && uni.getStorageSync('end')) {
            this.start_time = uni.getStorageSync('start');
            this.end_time = uni.getStorageSync('end');
          }
        }
        // 无论是否进行筛选日期  日历高亮都需要重置到start_time end_time的值
        this.calendar.forEach(val => {
          if (val.formData == this.start_time && !val.isNot) {
            val.active = true;
            val.start = true;
          }
          if (val.formData == this.end_time && !val.isNot) {
            val.active = true;
            val.end = true;
          }
          if (new Date(val.formData).getTime() >= new Date(this.start_time).getTime() && new Date(val.formData)
            .getTime() <= new Date(this.end_time).getTime()) {
            val.isBg = true;
          }
        })
        uni.removeStorageSync('start');
        uni.removeStorageSync('end');
        this.startTime = '';
        this.endTime = '';

      }
    },
    onLoad() {
      this.getData(true, false);
    },
    onShow() {},
    onReachBottom() {},
    onPullDownRefresh() {
      this.selectId = {};
      // this.num = 0;
      this.showDel = 0; //编辑状态显示 0不显示 1 显示
      this.edit = this.i18n['编辑']; //编辑状态显示时编辑值
      this.selectAllFont = this.i18n['全选']; // 全选按钮显示文字
      this.isSelectAll = false; // 是否全选
      this.getData(true);
      this.getData(false, true);

    }
  };
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    min-height: 100vh;
  }


  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .text-through {
    text-decoration: line-through;
  }

  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  // 主体 start
  .content {

    padding: 0 24upx;
    .notData {
      padding-top: 200upx;
    }

    .check {
      display: inline-block;
      width: 60upx;
      height: 220upx;
      padding-top: 80upx;

      text {
        display: inline-block;
        vertical-align: top;
        font-size: 40upx;
        margin-right: 10upx;
        color: #999;

        &.act {
          color: $theme;
        }
      }
    }

    // 列表 start
    .act {
      color: $theme;
    }

    // 列表 end
    // 选中样式 start
    .item-active {
      label {
        line-height: 160upx;
        padding-top: 30upx;
      }

      .article {
        width: 370upx;
      }
    }

    // 选中样式 end
    // 按钮 start
    .btn-box {
      position: fixed;
      bottom: 0;
      background: #fff;
      width: 100%;
      height: 100upx;
      padding: 30upx 40upx 0;
      z-index: 100;

      button {
        border: 1px solid #999;
        color: #666;
        width: auto;
        padding: 0 40upx;
        font-size: 28upx;
        border-radius: 40upx;
        float: right;
        margin-right: 20upx;
        height: auto;
        line-height: 1.9;
      }
    }

    // 按钮 end
    .edit {
      text-align: right;
      padding: 20upx 20upx;
      font-size: 28upx;

      .select-tip {
        float: left;
      }
    }
  }

  // 主体 end

  // 选中radio样式 start
  .select-dot {
    font-size: 36rpx !important;
  }

  // 选中radio样式 end
  // 足迹列表 start
  .footprint-data {
    height: 60rpx;
    margin-left: 19rpx;

    .act {
      color: $theme;
    }
  }

  .footprint-wrap {
    // column-gap:2rpx;

    .footprint-item-wrap {
      // padding:0 6rpx 20rpx;
      box-sizing: border-box;
    }

    .footprint-item {

      position: relative;

      .mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        // background: rgba(0, 0, 0, 0.2);
        z-index: 11;
      }

      .footprint-item-select {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 34rpx;
        height: 34rpx;
        line-height: 34rpx;
        border-radius: 50%;
        text-align: right;
        color: #ffffff;
        background: #ffffff;
        z-index: 12;

        .act {
          color: $theme;
        }
      }

      .footprint-item-image {
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        overflow: hidden;

        .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
          overflow: hidden;
        }
      }

      .text-title {
        width: 100%;
        margin: 20rpx 0 8rpx;
      }

      .footprint-item-color {
        color: #FB2A25;
        margin-bottom: 26rpx;
      }
    }
  }

  // 足迹列表 end
  // 足迹编辑 start
  .footer-wrap {
    width: 750rpx;
    // height: 100rpx;
    background: #FFFFFF;
    opacity: 1;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .footer {
      height: 100rpx;
      padding: 0rpx 24rpx;
      box-sizing: border-box;
    }

    &::after {
      content: '';
      width: 100%;
      height: 1px;
      background: #EEEEEE;
      position: absolute;
      left: 0;
      top: 0;
      transform: scaleY(0.5);
    }

    .btn-bg {
      border: none;
      width: 200rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: #F6F6F6;
      color: #333333;
      opacity: 1;
      border-radius: 36rpx;
      // color: #FFFFFF;
      font-size: 28rpx;
    }
  }

  // 足迹编辑 end
  // 日历 start
  .data-wrap {
    padding: 32rpx 19rpx 40rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 11;

    .data-to {
      padding: 0 24rpx;
    }

    .data-box {
      width: 245rpx;
      height: 56rpx;
      border: 1px solid #bfbfbf;
      border-radius: 5rpx;
      padding: 0 20rpx;
      // box-sizing: border-box;

      .data-img {
        width: 30rpx;
        height: 30rpx;
        margin-top: -4rpx;

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }

  // 日历 end
  // 日历弹框 start
  .calendar-box {
    background: #FFFFFF;
    width: 640rpx;
    min-height: 610rpx;
    padding: 0 24rpx 24rpx;

    .calendar-wrap {
      .height-76 {
        height: 70rpx;
      }

      .calendar-title-prev {
        padding: 0 24rpx;
        transform: rotate(-180deg);
        box-sizing: border-box;
      }

      .calendar-title-next {
        padding: 0 24rpx;
        box-sizing: border-box;
      }

      .calendar-content {
        transition: all .3s ease;
        overflow: hidden;

      }

      .calendar-item {
        width: calc(100% / 7);
        position: relative;

        .calendar-item-bg {
          width: 100%;
          height: 64rpx;

          &.isBg {
            background: rgba(255, 100, 100, 0.3);
          }

          &.not {
            color: #BFBFBF;
          }

          &.start.isBg {
            margin-left: 8rpx;
            border-radius: 32rpx 0rpx 0rpx 32rpx;
          }

          &.end.isBg {
            margin-right: 8rpx;
            border-radius: 0 32rpx 32rpx 0;
          }

          &.active .calendar-item-num {
            background: #FB2A25;
            color: #FFFFFF;
          }

          .calendar-item-num {
            width: 56rpx;
            height: 56rpx;
            line-height: 56rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            &.future {
              color: #888;
            }
          }
        }

      }

      .calendar-close {
        height: 48rpx;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 1rpx;
          background: #EEEEEE;
          transform: scaleY(0.5);

        }

        .calendar-close-btn {
          width: 48rpx;
          height: 48rpx;
          line-height: 48rpx;
          background: #FF6464;
          // transform: rotate(90deg);
          position: relative;
          z-index: 1;

        }
      }
    }
  }

  // 日历弹框 end
  // 足迹编辑 end
  .sticky-bar {
    position: sticky;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 32rpx;
    background-color: #F8F8F8;
    z-index: 99;
  }

  .fu-fs32 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .solid-bottom::after {
    z-index: 9999;
  }

  .grid.col-3>uni-view {
    width: 33%;
  }

  .grid {
    justify-content: space-between;

  }
</style>
